<template>
  <div class="search_body">
    <!-- 操作系统筛选部分 -->
    <div class="OperSys_div">
      <van-row>
        <van-col span="12">
          <!-- 文字提示 筛选 部分 -->
          <div class="fontTips">操作系统</div>
        </van-col>
        <van-col span="12">
          <!-- 显示 当前选中的 -->
          <div class="chooesed_item_font">
            {{ choesd_opersys.name }}
          </div>
        </van-col>
      </van-row>
      <search-item ref="myChild" :data="OperSys" @item_click="itemClick"></search-item>
    </div>
    <!-- 价格部分 -->
    <div class="OperSys_div">
      <van-row>
        <van-col span="12">
          <!-- 文字提示 筛选 部分 -->
          <div class="fontTips">价格(元)</div>
        </van-col>
        <van-col span="12">
          <!-- 显示 当前选中的 -->
          <div class="chooesed_item_font">
            {{ show_price }}
          </div>
        </van-col>
      </van-row>
      <!-- 用户输入部分 -->
      <van-row class="price_input_div">
        <van-col span="11">
          <input
            type="number"
            class="price_input"
            v-model="choosed_price.min_price"
            oninput="if(value.length > 6)value = value.slice(0, 6)"
          />
        </van-col>
        <van-col span="2" class="xian_row">-</van-col>
        <van-col span="11">
          <input
            type="number"
            class="price_input"
            v-model="choosed_price.max_price"
            oninput="if(value.length > 6)value = value.slice(0, 6)"
          />
        </van-col>
      </van-row>
    </div>
    <!-- 时装部分 -->
    <div class="skin_div">
      <!-- 标题部分 -->
      <van-row>
        <van-col span="12">
          <!-- 文字提示 筛选 部分 -->
          <div class="fontTips">时装</div>
        </van-col>
        <van-col span="12">
          <!-- 显示 当前选中的 -->
          <div class="chooesed_item_font">
            {{show_skin_count}}
          </div>
        </van-col>
      </van-row>
      <!-- 填写部分 -->
      <van-row class="skin_input_div">
        <van-col span="15">奇珍时装 + 稀世时装数量</van-col>
        <van-col span="9">
          <van-row>
            <van-col span="2">
              >=
            </van-col>
            <van-col span="22">
              <input
                type="number"
                class="price_input skin_count"
                v-model="skin_count"
                oninput="if(value.length > 6)value = value.slice(0, 6)"
              />
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <!-- 时装名称部分 -->
    <div class="skin_name_div" v-if="show_skin_list">
      <!-- 标题部分 -->
      <van-row>
        <van-col span="12">
          <!-- 文字提示 筛选 部分 -->
          <div class="fontTips">时装名称</div>
        </van-col>
        <van-col span="12">
          <!-- 显示 当前选中的 -->
          <div class="chooesed_item_font">
          </div>
        </van-col>
      </van-row>
      <!-- 填写部分 -->
      <van-row class="skin_input_div">
        <van-col span="17">请选择皮肤：</van-col>
        <van-col span="7">
          <a href="javascript:" class="chooes_skin" @click="show_popup = true">选择时装 ></a>
        </van-col>
      </van-row>
    </div>
    <!-- 皮肤选择弹出层 -->
    <div class="popup" :class="show_popup ? 'cur':''" v-if="isRander">
      <!-- 顶部栏 -->
      <div class="popup_top">
        <van-row>
          <van-col span="3" offset="1" class="fanhui" @click="show_popup = false">返回</van-col>
          <van-col span="14" class="more_skin">更多時裝</van-col>
          <van-col span="3" class="chongzhi" @click="clearSkinArr">重置</van-col>
          <van-col span="3" class="wancheng" @click="show_popup = false">完成</van-col>
        </van-row>
      </div>
      <van-index-bar :index-list="indexList" highlight-color="#E74E4B">
        <div v-for="(item,index) of indexList" :key="index" >
          <van-index-anchor :index="item">{{item}}</van-index-anchor>
          <van-cell class="vue_cell" :class="select_skin_list.indexOf(item.skin_Id) != -1 ? 'selected_item':''" v-for="(item,index2) in show_skin_list[index]" :key="index2" @click="select_skin(item.skin_Id)">
            {{item.role_name}} - {{item.skin_name}}
          </van-cell>
        </div>
      </van-index-bar>
    </div>
    <!-- 底部区域 -->
    <div class="search_body_footer">
      <!-- 左右布局 左面重置 右面完成 -->
      <van-row>
        <van-col span="12" class="left" @click="chongzhi">重置</van-col>
        <van-col span="12" class="right" @click="wancheng">完成</van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import SearchItem from "./SearchItem";
import PY from "../../../assets/js/lib/ChinesePY";
export default {
  name: "SearchBody",
  components: {
    SearchItem,
  },
  data() {
    return {
      // 操作系统部分数据
      OperSys: [
        { id: "1", name: "iOS (苹果手机)" },
        { id: "2", name: "Android (安卓手机)" },
      ],
      // 记录 当前选中的操作系统数据
      choesd_opersys: {},
      // 记录 当前的价格筛选
      choosed_price: { min_price: "", max_price: "" },
      // 显示 用户选择的 价格范围
      show_price: "",
      // 记录 当前 填写的时装数量
      skin_count:"",
      // 显示用户选择的时装数量
      show_skin_count:"",
      // 皮肤选择弹出层
      show_popup:false,
      // 展示的列表
      indexList: [],
      // 展示的皮肤数据
      show_skin_list:[],
      // 阻止列表渲染
      isRander:false,
      // 存储 选择的皮肤
      select_skin_list:[]
    };
  },
  methods: {
    itemClick(val) {
      this.choesd_opersys = val;
    },
    showPrice() {
      let min_price = this.choosed_price.min_price - 0; // 最小价格
      let max_price = this.choosed_price.max_price - 0; // 最大价格
      if (!min_price && !max_price) {
        this.show_price = "";
        return;
      }
      if (!min_price || !max_price) {
        // 最小价格 和 最大价格 只填写了一个
        if (min_price) {
          // 如果填写了最小价格 显示为：>= min_price
          this.show_price = ">=" + min_price;
        } else {
          // 填写了最大价格  显示为：<= max_price
          this.show_price = "<=" + max_price;
        }
      } else {
        // 两个都选择了 min_price ~ max_price
        this.show_price = min_price + " ~ " + max_price;
      }
    },
    // 请求 皮肤列表数据
    async getSkinNameList(){
      const {data:res} = await this.$http.get("getSkinNameList");
      // console.log(res);
      let SZM = [];// 过滤之后的列表
      let Skin_filter_data = [];// 过滤之后的皮肤数据
      for (let index = 0; index < res.data.roleList.length; index++) {
        let now_roke_skinArr = res.data.skin_name_list[index];// 当前循环角色的皮肤数组
        let pinyin = PY.GetJP(res.data.roleList[index].role_name).substring(0,1).toUpperCase();// 获取首字母
        if(pinyin != SZM[SZM.length - 1]){// 如果当前的拼音 与 上一个相同 则 不记录
          SZM.push(pinyin)
          Skin_filter_data.push(now_roke_skinArr);
        }else{
          // 代表 当前的首字母 和 上一个首字母重复了
          // 将 皮肤列表的当前数据 添加到上一个数据里
          let last_data = Skin_filter_data[Skin_filter_data.length - 1];
          last_data.push(now_roke_skinArr);
        }
      }
      console.log(res);
      this.indexList = SZM;

      // 整理數據
      let show_data = [];// 最終展示的數據
      let roleList = res.data.roleList;// 角色列表
      let roleIndex = 0; // 记录角色下标
      for (let index = 0; index < SZM.length; index++) {// 外層循環不重複的 首字母
        let innerArr = [];
        for (let index2 = 0; index2 < Skin_filter_data[index].length; index2++) {// 進入 当前皮肤循环
          let now_skin_item =  Skin_filter_data[index][index2];// 当前的当个皮肤 或 数组
          if(!now_skin_item.length){// 如果 当前元素不是数组
            let obg = {
              skin_Id:now_skin_item._id,
              role_name:roleList[roleIndex].role_name,
              skin_name:now_skin_item.skin_name
            }
            innerArr.push(obg);
          }else{
            // 数组
            roleIndex++;
            for (let index = 0; index < now_skin_item.length; index++) {
              let obg = {
                skin_Id:now_skin_item[index]._id,
                role_name:roleList[roleIndex].role_name,
                skin_name:now_skin_item[index].skin_name
              }
              innerArr.push(obg);
            }
          }
        }
        roleIndex ++;
        show_data.push(innerArr);
      }
      // console.log(show_data);// 最终真理的数据 
      // 赋值
      this.show_skin_list = show_data;
      console.log(this.show_skin_list);
      this.isRander = true;
    },
    // 选择了皮肤
    select_skin(skinid){
      // 判断数组中是否 有 有则删除 没有则添加
      if(this.select_skin_list.indexOf(skinid) != -1){// 包含
        this.select_skin_list.remove(skinid);
      }else{
        // 不包含
        this.select_skin_list.push(skinid);
      }
    },
    // 清空数组
    clearSkinArr(){
      this.select_skin_list = [];
    },
    // 重置搜索条件
    chongzhi(){
      this.choesd_opersys = {};
      // 记录 当前的价格筛选
      this.choosed_price = { min_price: "", max_price: "" };
      // 显示 用户选择的 价格范围
      this.show_price = "";
      // 记录 当前 填写的时装数量
      this.skin_count = "";
      // 显示用户选择的时装数量
      this.show_skin_count = "";
      // 存储 选择的皮肤
      this.select_skin_list = [];
      // 处罚子级 清除数据
      this.$refs.myChild.clearData();
      this.show_popup = false;
    },
    // 完成 搜索
    wancheng(){
      let search1 = this.choesd_opersys
      let search2 = this.choosed_price
      let search3 = this.skin_count
      let search4 = this.select_skin_list

      let where = "?";// 最终的筛选条件
      if(search1.id){// 如果选择了 操作系统
        if(search1.id == "1"){
          where += "type=IOS&";
        }else{
          where += "type=Android&";
        }
      }
      if(search2.max_price){
        where += "maxPrice=" + search2.max_price + "&";
      }
       if(search2.min_price){
        where += "minPrice=" + search2.min_price + "&";
      }
      if(search3){
        where += "xsCount=" + search3 + "&";
      }
      // console.log(search4);
      if(search4.length && search4.length > 0){
        where += "searchid=" + search4.join(",");
      }
      // console.log(where);
      this.$router.push("/goodslist" + where);
    }
  },
  watch: {
    // 监视 价格的 改变
    "choosed_price.min_price"(val) {
      this.showPrice();
    },
    "choosed_price.max_price"(val) {
      this.showPrice();
    },
    // 监视 时装数量的变化
    skin_count(val){
      if(val > 999)this.skin_count = 999;;
      this.show_skin_count = "奇珍+稀世时装数量>=" + this.skin_count;
    }
  },
  mounted() {
    // console.log(PY.GetJP("1第五人格"));
  },
  created() {
    // 发起网络请求
    this.getSkinNameList();
  },
};
</script>
<style lang="less" scoped>
.search_body {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
}

.OperSys_div {
  border-top: 0.01rem solid #f6f6f6;
  padding-bottom: 0.15rem;
}
.fontTips {
  font-size: 0.14rem;
  font-weight: bold;
  padding-left: 0.13rem;
  margin: 0.1rem 0rem;
}
.chooesed_item_font {
  font-size: 0.13rem;
  text-align: right;
  padding-right: 0.15rem;
  margin-top: 0.1rem;
}
.price_input_div {
  font-size: 0.12rem;
}
.price_input {
  display: inline-block;
  width: 1.525rem;
  height: 0.4rem;
  border-radius: 0.05rem;
  background-color: #ffffff;
  text-align: left;
  line-height: 0.42rem;
  overflow: hidden;
  margin: 0rem 0.03rem;
  border: 0.01rem solid #cccccc;
  box-sizing: border-box;
  margin-left: 0.1rem;
  padding-left: 0.15rem;
}
.xian_row {
  font-size: 0.1rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.16rem;
}
.skin_input_div{
  font-size: 0.14rem;
  padding: 0rem 0.15rem;
  height: 0.38rem;
  line-height: 0.38rem;
}
.skin_count{
  width: 1rem;
  font-size: 0.12rem;
  float: right;
}
.chooes_skin{
  color: #000000;
  background-color: #fff;
  border: 0.01rem solid #CCCCCC;
  padding: 0.1rem 0.15rem;
  border-radius: 0.05rem;
}
.popup{
  position: absolute;
  top: 0;
  left: 0;
  transition: .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
  background-color: #FFF;

  opacity: 1;
  visibility: visible;
  z-index: 999;
  width: 100%;
  height: auto;
  display: none;
}
.cur {
  display: block;
  // opacity: 1;
  // visibility: visible;
  // z-index: 999;
  // width: 100%;
  // height: auto;
}
.van-index-bar{
  /deep/ .van-index-bar__index{
    margin: 0.062rem 0.02rem;
  }
}
.popup_top{
  background-color: #FFF;
  width: 100%;
  height: 0.45rem;
  font-size: 0.15rem;
  border-bottom: 0.01rem solid #F5F6F7;
  .van-row{
    text-align: center;
    line-height: 0.45rem;
  }
}
.more_skin{
  font-weight:bold;
  padding-left: 0.5rem;
  box-sizing: border-box;
}
.vue_cell{
  transition:  all .1s;
}
.vue_cell:active{
  background-color: #EFEFEF;
}
.selected_item{
  div{
    color: #E74E4B;
  }
}
.search_body_footer{
  position: fixed;
  bottom: 0rem;
  height: 0.48rem;
  width: 100%;
  // background-color: red;
  font-size: 0.16rem;
  text-align: center;
  line-height: 0.48rem;
  .left{
    background-color: #FFF;
    color: #1E1E1E;
  }
  .right{
    background-color: #E74E4B;
    color: #fff;
  }
}
</style>